<template>
  <div class="home">
    <a-layout style="height: 100%">
      <a-layout-sider>
        <a-menu
            theme="dark"
            style="width: 200px"
            mode="inline"
            v-model:selectedKeys="openKeys"
            @click="handleClick"
        >
          <a-menu-item key="/hosts">
            Hosts
          </a-menu-item>
          <a-menu-item key="/port">
            端口占用
          </a-menu-item>
          <a-menu-item key="/json">
            JSON格式化
          </a-menu-item>
          <a-menu-item key="/toText">
            文字转拼音
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-content>
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import {onMounted, ref} from "vue"
import {useRoute, useRouter} from 'vue-router'

export default {
  name: 'Home',
  components: {},
  setup() {
    const route = useRoute()
    const router = useRouter()
    let openKeys = ref(["/hosts"])
    onMounted(() => {
      if (route.path === '/') {
        router.push("/hosts")
        openKeys.value = ["/hosts"]
      } else {
        openKeys.value = [route.path]
      }
    })
    let text = ref("")
    const Greet = () => {
      window.go.main.App.Greet(text.value).then(res => {
        text.value = res
      })
    }

    const handleClick = (e) => {
      router.push(e.key)
    }
    return {
      text,
      Greet,
      openKeys,
      handleClick
    }
  }
}
</script>
<style scoped>
.home {
  height: 100%;
}
</style>